<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./css/shizhan_course_detail.css"/>
		<title>实战课详情页</title>
	</head>
	<body>
		<!-- 侧边栏 -->
		<div class="cebianlan">
			<div class="zhixun">
				<img src="img/6咨询.png">
				<div class="zhixun1"><a href="#">咨询</a></div>
			</div>
			<div class="bangzhu">
				<img src="img/帮助.png">
				<div class="zhixun1"><a href="#">帮助</a></div>
			</div>
			<div class="weixin">
				<img src="img/微信.png" class="wiexin1">
				<div class="zhixun1"><a href="#">微信</a></div>
				<div class="weixin2">
					<span>欢迎关注米泡教育</span>
					<img src="./img/erweima.jpg">
				</div>
			</div>
			<div class="yanjing">
				<img src="img/眼睛.png">
				<div class="zhixun1"><a href="#">监督</a></div>

			</div>
			<div class="yanjing">
				<a href="#maodian"><img src="img/向上.png"></a>
			</div>

		</div>
		<!-- 导航栏 -->
		<div class="f1" id="maodian">
			<div class="container">
				<!-- 左侧 -->
				<div class="left">
					<img src="./img/head-logo.svg" alt="">
					<ul class="nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="mianfei_course.html">免费课</a></li>
						<li><a href="shizhan_course.html">精品课</a></li>
					</ul>
				</div>
				<!-- 右侧 -->
				<div class="right">
					<div class="souSuo">
						<input type="text" placeholder="请输入课程" id="input"/>
						<a href=""><img src="img/黄色搜索icon.png"></a>
					</div>
					<div class="gouWuChe">
						<img src="img/购物车.png">
						<span><a href="Shopping_cart.html">购物车</a></span>
					</div>
					<div class="geRenZhonXin">
						<span><a href="PersonalCenter.html">个人中心</a></span>
						<div class="touxiang">
							<img src="img/1.jpg" alt="">
							<ul class="xialacaidan">
								<!-- 下拉菜单 -->
						<li><a href="PersonalCenter.html">我的账户</a></li>
						<li><a href="PersonalCenter.html">我的课程</a></li>
						<li><a href="login.html">退出</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第二楼 -->
		<div class="f2">
			<div class="container">
				<div>
					<div class="f2_left">
						<!-- <img src="./img_course/shizhanke/2/2.png" alt=""> -->
					</div>
					<div class="f2_right">
						<p class="big_title">Python 8天从入门到精通训练营</p>
						<p class="small_title">
							<span>226787人在学</span>
							<span> 课程小节：94小节</span>
							<span> 时长：20小时</span>
						</p>
						<!-- 倒计时 -->
						<div class="zhekou">
							<span>限时折扣</span>
							<span id="showtime"></span>
						</div>
						<p class="jiage">
							<span>活动价:</span>
							<span>4.99</span>
						</p>
						<div class="goumai">
							<button type="button">立即购买</button>
							<div>
								<button type="button"><img src="./img/购物车空.png">加入购物车</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第三楼 -->
		<div class="f3">
			<div class="container">
				<p>课程详情</p>
				<div class="f3_body" >
					<div class="f3_left">
						<!-- <img src="./img_course/shizhanke/detial/1_1/11.png" alt=""> -->
					</div>
					<div class="f3_right">
						<div class="f3_right_top">
							<p>扫码咨询课程</p>
							<img src="img/36AF73F27F3A20FDD85BC7EA3C3DB34E.jpg" >
						</div>
						<div class="f3_right_bottom">
							<p>讲师介绍</p>
							<p>喵小妖</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit error architecto sit fugiat quod natus voluptates ut aliquid laudantium quos adipisci provident vero impedit deleniti nesciunt suscipit corporis qui nobis?
							Nam incidunt doloremque sed non labore vitae laudantium mollitia magnam eius ad dolorum quod nostrum quisquam nisi perferendis fugit aliquam earum a expedita harum nesciunt veniam quis. Ab officia eum.
							Officia dolorem quod vel ullam est doloremque neque facilis iste illum id inventore ab iure voluptas veniam commodi alias labore impedit. Ex corporis corrupti veritatis magni rerum explicabo reiciendis delectus!
							</p>
						</div>
					</div>
				</div>

			</div>
		</div>



		<!-- 最后一楼 -->
		<div class="foot1">
			<div class="container">
				<!-- 左边 -->
				<div class="left">
					<div class="foot-Box">
						<div class="title">关于米泡</div>
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">荣誉资质</a></li>
							<li><a href="#">网站地图</a></li>
							<li><a href="#">练习我们</a></li>
							<li><a href="#">加入我们</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">帮助中心</div>
						<ul>
							<li><a href="#">如何购买观看</a></li>
							<li><a href="#">优惠券介绍</a></li>
							<li><a href="#">余额介绍</a></li>
							<li><a href="#">就业班课程</a></li>
							<li><a href="#">更多&gt;&gt;</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">推荐课程</div>
						<ul>
							<li><a href="#">JavaScript训练营</a></li>
							<li><a href="#">前端开发</a></li>
							<li><a href="#">大全栈工程师</a></li>
							<li><a href="#">Linux云计算</a></li>
							<li><a href="#">数据库开发</a></li>
						</ul>
					</div>
				</div>
				<!-- 右边 -->
				<div class="right">
					<div class="gongzhonghao">
						<p>公众号</p>
						<img src="img/erweima.jpg">
					</div>
					<div class="douyinhao">
						<p>抖音号</p>
						<img src="img/douyinhao.jpg">
					</div>
				</div>
			</div>
		</div>
		<div class="foot2">
			<div class="container">
				<div class="foot2-box">
					<p>地址：武汉市黄陂区武湖街道汉口北大道1号武汉文理学院</p>
					<p>©2022-2023武汉米泡教育科技有限公司版权所有 京ICP备16378246号-1</p>
					<p><img src="img/备案.png">京公网安备 11010102002019号</p>
				</div>
			</div>
		</div>
		
		<script src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
		//获取实战课课程详情请求
			var id=window.location.search;
			var lid=id.split('=')[1];
			console.log(id)
			$.get(`/index/detail?lid=${lid}`,data=>{
				// console.log(data)
					const {
						course_title:t,//标题
						course_studyNumber:num,//人数
						course_hourse:h,//时长
						course_chapter:p,//章节
						course_fees:fees,//价格
						course_teach:teach,//讲师
						course_image:img,//图片
						course_detail_img:img_detail,//图片详情			
					} = data[0];
					html=`<img src="${img}">`
					$('.f2_left').append(html)
					$('.big_title').text(t)
					$('.small_title>span:nth-child(1)').text(num+'人在学')
					$('.small_title>span:nth-child(2)').text('课程小结:'+p+'小节')
					$('.small_title>span:nth-child(3)').text('时长'+h+'小时')
					$('.jiage>span:nth-child(2)').text('￥'+fees)
					html2=`<img src="${img_detail}">`
					$('.f3_left').append(html2)		
					
			})
			$.get(`/index/teacher?lid=${lid-17}`,data=>{
				// console.log(data)
				const {tutor_describes:describes,tutor_name:name} = data[0];
				$('.f3_right_bottom>p:nth-child(2)').text(name)
				$('.f3_right_bottom>p:nth-child(3)').text(describes)
			})
			
			
			//点击购物车请求
			$('.goumai>div>button').click(function(){
				// console.log(lid)
				//获取页面内容
			const course_title=$('.big_title').text();//标题
			const course_image=$('.f2_left>img').attr("src");//图片
			const course_fees=$('.jiage>span:nth-child(2)').text().slice(1)//价格
			let data = `course_title=${course_title}&course_image=${course_image}&course_fees=${course_fees}&course_id=${lid}`;
				//post请求
				let xhr=new XMLHttpRequest();
				xhr.open("POST",'/shopping/shopping_car');
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
				xhr.onload=()=>{
					let jsonObj=JSON.parse(xhr.responseText)
					if(jsonObj.code==200){
						alert('添加成功!')
					}
				}
				xhr.send(data);
			})
			
			//倒计时
			var showtime = function () {
			    var nowtime = new Date(),  //获取当前时间
			        endtime = new Date("2022/5/25");  //定义结束时间
			    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
			        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
			        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
			        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
			        lefts = Math.floor(lefttime/1000%60);  //计算秒数
				 return `距离结束：仅剩 ${leftd } 天 ${lefth} 小时 ${leftm } 分 <span>${lefts}</span>  秒`;//返回倒计时字符串 	
			}
			var div = document.getElementById("showtime");
			setInterval (function () {
			    div.innerHTML = showtime();
			}, 1000);  //反复执行函数本身
		</script>
		<script type="text/javascript">
			$('#input').keydown(function(e){
				if(e.keyCode==13){
					let keyword = $(this).val()
					$(window).attr('location','/input.html?keyword='+keyword);	
				}
			})
		</script>

	</body>
</html>
